<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/jquery.fly.min.js"></script>

    <title></title>
</head>
<body class="gray-bg">


<!--Header-->
<div class="header-div" id="top">
    <div class="mid-header clearfix">
        <a href="clientHome.html" class="logo-font">Delicious</a>
        <span class="header-right-box">
            <!--<a href="${pageContext.request.contextPath }/linkRegister" class="header-link-box"><button type="button">Login</button></a>-->
            <!--<span> | </span>-->
            <!--<a href="${pageContext.request.contextPath }/linkLogin" class="header-link-box"><button type="button">Register</button></a>-->

             <span class="wlc-font">Welcome, Avril</span>
            <a href="javascript:void(0)" class="header-link-box"><button type="button">查看订单</button></a>
            <span> | </span>
            <a href="javascript:void(0)" class="header-link-box"><button type="button">注销</button></a>
        </span>
    </div>
</div>


<div class="mid-nav shadow-div">
    <div class="row">
        <div class="col-md-3 inner-center">
            <img src="./img/2.jpg"
                 class="m-logo img-circle">
        </div>
        <div class="col-md-9 content-title">
            <h3>这里就是商家名</h3>
            <h5><i class="fa fa-phone" aria-hidden="true">&nbsp;&nbsp;</i>12345678912</h5>
            <h5>商家地址：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h5>
        </div>
    </div>
</div>


<div class="mid-nav shadow-div">
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail small-card">
                <img src="./img/1.jpg" class="menu-img">
                <div class="caption">
                    <h3>Dish 002</h3>
                    <div class="row card-margin">
                        <div class="col-md-8">
                            <b class="price-font glyphicon glyphicon-yen"></b>
                            <b class="price-font">20</b>
                        </div>
                        <div class="col-md-4">
                            <!--update-->
                            <button type="button" class="btn add-btn hvr-wobble-to-bottom-right addcart" onclick="fly()"><i class="glyphicon glyphicon-shopping-cart" style="color: #ffffff;"></i></button>
                        <!--update end-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header gold-bg">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>菜名</th>
                            <th>数量</th>
                            <th>价格</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Dish 003dddddddddddd</td>
                            <td>1</td>
                            <td>12</td>
                        </tr>
                        <tr>
                            <td>Dish 003dddddddddddd</td>
                            <td>1</td>
                            <td>12</td>
                        </tr>
                        <tr>
                            <td>Dish 003dddddddddddd</td>
                            <td>1</td>
                            <td>12</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-common hvr-wobble-vertical">Save changes</button>
            </div>
        </div>
    </div>
</div>


<!--update-->
<div class="right-box" id="end">
    <a href="#infoMenu" class="collapsed" data-toggle="collapse"><h3>Your Cart</h3></a>
    <div id="infoMenu" class="nav nav-pills nav-stacked collapse">
        <!--update end-->
    <table style="width: 300px;table-layout: fixed;" class="table table-striped">
        <thead>
        <tr>
            <th>菜名</th>
            <th>数量</th>
            <th>价格</th>
        </tr>
        </thead>

        <tbody id="cartBody">
            <tr>
                <td>Dish 003dddddddddddd</td>
                <td><input type="number" value="1"/></td>
                <td>12</td>
            </tr>
            <tr>
                <td>Dish 003dddddddddddd</td>
                <td><input type="number" value="1"/></td>
                <td>12</td>
            </tr>
            <tr>
                <td>Dish 003dddddddddddd</td>
                <td><input type="number" value="1"/></td>
                <td>12</td>
            </tr>
        </tbody>

        <tfoot>
        <tr>
            <td colspan="2">总计:</td>
            <td id="total"><h3>36</h3></td>
        </tr>
        </tfoot>
    </table>
    <div class="checkout-box">
        <a href="#">
            <button type="button" class="btn btn-black hvr-wobble-vertical" data-toggle="modal" data-target="#myModal"><span style="color: gold;">Check Out</span></button>
        </a>
    </div>
        <!--new-->
    </div>

</div>

<a href="#top">
    <div class="right-top-box">
        <span class="glyphicon glyphicon-chevron-up back-icon"></span>
    </div>
</a>

</body>

<script>

    function fly(){
        var offset = $("#end").offset();  //结束的地方的元素

            var addcar = $(this);
            var flyer = $(' <button type="button" class="btn add-btn" style="width: 80px;height: 50px;"><i class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></i></button>');
            flyer.fly({
                start: {
                    left: event.pageX+10,
                    top: event.pageY
                },
                end: {
                    left: offset.left+10,
                    top: offset.top+10,
                    width: 0,
                    height: 0
                },
                onEnd: function(){
                    addcar.css("cursor","default").removeClass('orange').unbind('click');
                    this.destory();
                }
    });
    }

</script>



</html>